<template>
  <div class="star_content" :class="starType">
    <span v-for="(itemClass,index) in starClasses" :class="itemClass" class="star_item" :key="index"></span>
  </div>
</template>

<script>
  const star_length = 5
  const clas_on = 'on', clas_half = 'half', clas_off = 'off'
  export default {
    props: {
      size: {
        type: Number
      },
      score: {
        type: Number
      }
    },
    computed: {
      starType() {
        return 'star_' + this.size
      },
      starClasses() {
        let result = [];
        let seller_score = Math.floor(this.score * 2) / 2;
        let isHalf = seller_score % 1 !== 0;
        let full_star_Count = Math.floor(seller_score);
        for(let i = 0; i < full_star_Count; i++) {
          result.push(clas_on);
        }
        if(isHalf) {
          result.push(clas_half);
        }
        while (result.length < star_length) {
          result.push(clas_off)
        }
        return result
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../common/styles/mixin";
  .star_content {
    .star_item {
      display: inline-block;
      background-repeat: no-repeat;
      font-size: 0;
    }
    &.star_48 {
      .star_item {
        width: 20px;
        height: 20px;
        margin-right: 20px;
        -webkit-background-size: 20px 20px;
        background-size: 20px 20px;
        &:last-child {
          margin-right: 0;
        }
        &.on {
          @include bg-image('./iconImgs/star48_on')
        }
        &.off {
          @include bg-image('./iconImgs/star48_off')
        }
        &.half {
          @include bg-image('./iconImgs/star48_half')
        }
      }
    }
    &.star_36 {
      .star_item {
        width: 15px;
        height: 15px;
        margin-right: 6px;
        -webkit-background-size: 15px 15px;
        background-size: 15px 15px;
        &:last-child {
          margin-right: 0;
        }
        &.on {
          @include bg-image('./iconImgs/star36_on')
        }
        &.off {
          @include bg-image('./iconImgs/star36_off')
        }
        &.half {
          @include bg-image('./iconImgs/star36_half')
        }
      }
    }
    &.star_24 {
      .star_item {
        width: 10px;
        height: 10px;
        margin-right: 3px;
        -webkit-background-size: 10px 10px;
        background-size: 10px 10px;
        &:last-child {
          margin-right: 0;
        }
        &.on {
          @include bg-image('./iconImgs/star24_on')
        }
        &.off {
          @include bg-image('./iconImgs/star24_off')
        }
        &.half {
          @include bg-image('./iconImgs/star24_half')
        }
      }
    }
  }
</style>